<style scoped>
    .prolicydtl{
        padding: 0 30px;
    }
    #myChart{
        height:600px;
    }
</style> 
<template>
    <div>
        <product-title></product-title>
        <div class="prolicydtl">
            <Row>
                <Col span="" style="text-align:right;" class="mb24">
                &emsp;
                    <!-- <Button type="primary">导出表格</Button> -->
                </Col>
                <Col span="" class="mb24">
                    <Table :columns="column" :data="data"></Table>
                </Col>
                <Col span="">
                    <div id="myChart"></div>
                </Col>
            </Row>
        </div>
    </div>
</template>



<script>
import echarts from 'echarts'
import productTitle from '../../components/productTitle';
import {policydtl} from '../../api/policy'
    export default {
        data() {
            return {
                column: [{
                        title: '公司名称',
                        key: 'oname',
                        align: 'center',
                    },
                     
                    {   
                        title: '投保单号',
                        key: 'insure_num',
                        align: 'center',
                    },
                    {   
                        title: '保单号',
                        key: 'policy_num',
                        align: 'center',
                    },
                    {   
                        title: '保费类型',
                        key: 'policy_type',
                        align: 'center',
                        render:(h,params)=>{
                            return h('div',params.row.policy_type==1?'原保费':params.row.policy_type==2?'标准保费':"");
                        }
                    },
                    {   
                        title: '保单类型',
                        key: 'status',
                        align: 'center',
                        render:(h,params)=>{
                            return h('div',params.row.policy_type==1?'预收件':params.row.policy_type==2?'承保件':params.row.policy_type==3?'契撤件':
                            params.row.policy_type==4?'停效件':
                            params.row.policy_type==5?'失效件':
                            params.row.policy_type==6?'解约件':
                            params.row.policy_type==7?'终止件':''
                            );
                        }
                    },
                    {
                        title: '工号',
                        key: 'job_code',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', {

                            }, params.row.job_code)
                        },
                    },
                    {
                        title: '营销员',
                        key: 'name',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', {
                                attrs: {
                                    class: "a-link"
                                },
                            }, params.row.name)
                        },
                    },
                   
                    {
                        title: '保费',
                        key: 'policy_type',
                        align: 'center',
                        render:(h,params)=>{
                            return h('div',params.row.policy_type==1?params.row.premium:params.row.policy_type==2?params.row.standard_premium:'')
                        }
                    },
                    {
                        title: '险种',
                        key: 'insurance_name',
                        align: 'center',
                    },
                   
                ],
                data:[],
                xAxisData:[],
                seriesData1:[],
                seriesData2:[],
            }
        } ,
        components:{
            productTitle
        },
        created(){
            this.getdetail();
        },
        methods:{
            drawLine(id) {
                var _this = this;
                this.charts = echarts.init(document.getElementById(id))
                this.charts.setOption({
                    title : {
                            text: '保单保费详情',
                        },
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['保单件数/件','保费/万元']
                    },
                    toolbox: {
                        //是否可以切换其他图形显示
                        show : false,
                        feature : {
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : false,
                    xAxis : [
                        {
                            type : 'category',
                            data : _this.xAxisData
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'保单件数/件',
                            type:'bar',
                            data:_this.seriesData1,
                        },
                        {
                            name:'保费/万元',
                            type:'bar',
                            data:_this.seriesData2,
                        }
                    ]
                })
                // window.addEventListener('resize', function () {
                //     this.charts.resize();
                // });
            },
            getdetail(){
              let params={
                  eid:this.$route.params.eid,
                  policy_type:this.$route.params.type
              }
              new Promise((resolve,reject)=>{
                policydtl(params).then(response=>{
                    if(response.data.err == 0){
                        this.data = response.data.data.source_list;
                        this.xAxisData = response.data.data.data_x;
                        this.seriesData1 = response.data.data.data_count;
                        this.seriesData2 = response.data.data.data_premium;
                        this.drawLine('myChart');
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
            }
        },
        mounted(){
           
        }
    }
</script>